<template>
    <div style="margin-bottom:56px">
        <v-toolbar dark color="primary" style="box-shadow:none">
            <v-icon @click="$router.back(-1)">keyboard_arrow_left</v-icon>
            <v-toolbar-title>话题详细</v-toolbar-title>
        </v-toolbar>
        <v-layout>
            <v-flex xs12>
                <v-list-tile avatar>
                    <v-list-tile-avatar>
                        <img src= "../../assets/logo.png" >
                    </v-list-tile-avatar>
                    <v-list-tile-content>
                        <v-list-tile-sub-title class="text--primary">
                            <h3>{{post.user_name}}</h3>
                            <h4 style="color:red"><v-icon size="15px">place</v-icon>{{post.community_name}}</h4>
                        </v-list-tile-sub-title>
                    </v-list-tile-content>
                    {{ post.creat_tiame}}
                </v-list-tile>
                <v-divider inset></v-divider>
                <v-flex style="margin-left:56px; margin-top:5px">
                    <p style="margin-left:16px">
                        <span class="green--text">#{{post.topic_title}}</span>
                        {{post.post_content}}
                    </p>
                    <v-container fluid grid-list-sm>
                        <v-layout row wrap>
                            <v-flex v-for="(value,index) in pics" :key=index xs4>
                                <img :src="value.src" class="image" alt="lorem" width="100%" height="100%">
                            </v-flex>
                        </v-layout>
                    </v-container>
                    <v-layout row wrap>
                        <v-flex>
                            {{post.num_read}}阅读
                        </v-flex>
                        <v-flex>
                            <v-icon @click="like" :color="post.like ? 'green' : 'grey'" size="15px">thumb_up</v-icon> {{post.num_like}}
                        </v-flex>
                        <v-flex>
                            <v-icon size="15px">sms</v-icon> {{post.num_reply}}
                        </v-flex>
                    </v-layout>
                </v-flex>
                <v-card style="margin-top:5px" color="secondary lighten-5" dark tile flat>
                    <br/>
                </v-card>
                <v-layout row wrap v-for="(value,index) in comments" :key=index >
                    <v-flex xs10>
                        <span style="margin-left:10px" class="green--text">{{value.comment_user}}:</span>
                        <v-textarea style="margin-left:15px" solo rows=1 auto-grow readonly id='mes' class="commentArea" :value='value.comment_content'></v-textarea>
                    </v-flex>
                </v-layout>
                
            </v-flex>
        </v-layout>
        <div flat style="z-index:1;position:fixed;bottom:0;width:100%;background:white" ref='bottom'>
            <v-divider></v-divider>
            <v-layout row wrap style="margin-top:10px">
                <v-flex xs10 text-xs-center>
                    <div style="padding-left:10px">
                        <textarea class="sendArea" rows="1" @keyup="changeRow" ref="sendArea"></textarea>
                    </div>
                </v-flex>
                <v-flex xs2 text-xs-center>
                    <span style="color:#4caf50;" @click="send">提交</span>
                </v-flex>
            </v-layout>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            topic_title:this.$route.params.contact,
            name:'周',
            bottomNav:'all',
            post:
                {user_name: '汪', community_name: '晋合世家', creat_tiame:'2016-4-8', topic_title: '宠物天地', post_content:'头像测试', num_read:'11', num_like:'10', num_reply:'2', like:true},
            pics:[
                {src:'http://img06.tooopen.com/images/20161227/tooopen_sy_193231816562.jpg'},
                {src:'http://img06.tooopen.com/images/20161227/tooopen_sy_193231816562.jpg'},
                {src:'http://img06.tooopen.com/images/20161227/tooopen_sy_193231816562.jpg'},
                {src:'http://img06.tooopen.com/images/20161227/tooopen_sy_193231816562.jpg'},
                {src:'http://img06.tooopen.com/images/20161227/tooopen_sy_193231816562.jpg'}
            ],
            comments:[
                {comment_user:'小红', comment_content:'嘻嘻哈哈11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111'},
                {comment_user:'小白', comment_content:'嘻哈嘻哈周边服务的功能主要是给用户提供小区周边的商家信息。用户可以在这里查到所有小区周边的吃喝玩乐商家。用户同时也可以选择自己开店，上传执照审核通过之后就会在小区商家列表里面显示'},
                {comment_user:'小黑', comment_content:'嘻嘻'}
            ]
        }
    },
    methods:{
        like(){

        },
        changeRow(){
            var textarea=this.$refs['sendArea']
            textarea.style.height='auto'
            if(textarea.scrollHeight<130)
                textarea.style.height=textarea.scrollHeight+'px'
            else
                textarea.style.height='108px'
            this.handleScroll()
        },
        handleScroll(){
            var bottom=this.$refs['bottom']
            document.body.scrollTop=document.body.offsetHeight-window.innerHeight+100
        },
        send(){
            var sendArea=this.$refs['sendArea']
            this.comments.push({comment_user:this.name,comment_content:sendArea.value})
            sendArea.value=''
            this.changeRow()
        }
    },
    mounted() {
        this.handleScroll()
    },
}
</script>

<style scoped>
.sendArea{
    width: 100%;
    padding: 10px 15px;
    border-radius: 25px;
    border:solid 1px #eeeeee;
    font-size:15px;
    outline:none;
    overflow: hidden;
    resize: none;
}
</style>